<template>
	<view class="d-flex flex-column a-center">
		<view>
			<image src="../../static/logo.png" style="width: 100px; height: 50px;"></image>
		</view>

		<view v-if="show_form" class="content">
			<text @tap="factory_register_list" v-show="enter_history == 1 ? true : false" class="sign-info">历史的报名信息</text>
			<view class="signtitle">
				<view class="font-xmd">报名信息</view>
				<text>*本页面仅限于商家的负责人报名，员工请联系商家负责人报名</text>
			</view>
			
			<view class="signtext"><text>商家名称: </text>
				<input v-model="addressdata.name" :disabled="!namedisabled" :style="!namedisabled? 'color:#999': 'color:#000'" placeholder="请输入商家名称" />
			</view>
			<divider />

			<view class="signtext"><text>联系方式:</text>
				<input v-model="addressdata.phone" placeholder="请输入商家号码" type="number" maxlength="11" />
			</view>
			<divider />

			<view class="signtext"><text>联系地址:</text>
				<input v-model="addressdata.address" placeholder="请输入联系地址" />
			</view>
			<divider />

			<view class="signtext"><text>老板姓名: </text>
				<input v-model="addressdata.boss_name" placeholder="请输入老板姓名" />
			</view>
			<divider />

			<view class="signtext"><text>老板电话: </text>
				<input v-model="addressdata.boss_phone" placeholder="请输入老板电话" type="number" maxlength="11" />
			</view>
			<divider />

			<view class="signimg"><text>上传头像:</text>
				<image @click="touxiang()" :src="addressdata.head_url ? addressdata.head_url : '../../static/up-img.png'" :class="addressdata.head_url ? '' : 'upimg'"></image>
			</view>
			<divider />

			<view class="signimg"><text>上传二维码:</text>
				<image @click="erweima" :src="addressdata.code_url ? addressdata.code_url : '../../static/up-img.png'" :class="addressdata.code_url ? '' : 'upimg'"></image>
			</view>
			<divider />
			
			<button @click="tijiao" class="upbutton">申请加入该活动</button>
			
			<openAlert BgColor="rgba(0,0,0,0.7)" ref="factoryRegisterList" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false">
				<view class="factory-box">
					<view class="factory-title">我的历史报名信息</view>
					<view class="factory-text">*显示的为商家名称与联系方式</view>
					<scroll-view scroll-y class="scroll-box">
						<view v-for="(item, index) in factory_register_list_data" :key="index">
							<view @tap="factoryInfo(index)" class="factory-list">
								<view class="factory-data">
									<image class="factory-img" :src="item.head_url == '' ? '../../static/headimgurlerror.jpg' : item.head_url" />
									<view style="line-height: 50rpx;">
										<view class="factory-name">{{item.name}}</view>
										<view>{{item.tel}}</view>
									</view>
								</view>
								<image class="factory-icon" src="../../static/left.png" />
							</view>
							<view class="divide"></view>
						</view>
					</scroll-view>
					<view @tap="newfactory" class="newfactory" style="">新建商家</view>
				</view>
			</openAlert>
		</view>

		<view v-else class="velse">
			<view class="else">
				<!-- <view>{{ this.msg }}</view> -->
				<view>申请成功，请耐心等待审核</view>
			</view>
		</view>

		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	import openAlert from '@/components/open-alert/open-alert.vue'
	export default {
		components: {
			WCompress,
			openAlert,
		},
		data() {
			return {
				multi: [],
				single: '',
				addressdata: {
					boss_name: '',
					boss_phone: '',
					name: '',
					phone: '',
					address: '',
					code_url: '',
					head_url: ''
				},
				msg: '',
				show_form: false,
				activity_id: '',
				factory_id: '',
				factory_status_data: {},
				activity_title: '',
				factory_register_list_data: [],
				enter_history: 0,
				noverify: 0,
				namedisabled: true,
				history: false,
			};
		},
		onLoad(e) {
			console.log(e);
			this.activity_id = e.activity_id;
			this.factory_id = e.factory_id;
			// console.log(this.activity_id,this.factory_id)
			this.$comm.appLogin(user_info => {
				this.loadstatic(this.activity_id);
				this.activity_index()
			})
		},
		methods: {
			newfactory() {
				this.namedisabled = true
				this.history = false
				this.addressdata = {					boss_name: '',					boss_phone: '',					name: '',					phone: '',					address: '',					code_url: '',					head_url: '',				}
				this.$refs.factoryRegisterList.Close()
			},
			
			factoryInfo(index) {
				// console.log(this.factory_register_list_data[index])
				this.namedisabled = false
				this.history = true
				let data = this.addressdata;
				let data1 = this.factory_register_list_data[index];
				data.boss_name = data1.boss_name;
				data.boss_phone = data1.boss_tel;
				data.name = data1.name;
				data.phone = data1.tel;
				data.address = data1.address;
				data.code_url = data1.code_url;
				data.head_url = data1.head_url;
				this.$refs.factoryRegisterList.Close()
			},
			
			factory_register_list() {
				this.$comm.request({
					url: 'api/factory_register_list',
					method: 'GET',
					success: (res) => {
						console.log(res, 'factory_register_list')
						this.factory_register_list_data = res.data.result
						this.$refs.factoryRegisterList.Show()
					}
				})
			},
			
			activity_index() {
				this.$comm.request({
					url: 'api/activity_index',
					method: 'GET',
					data: {
						activity_id: this.activity_id
					},
					success: (res) => {
						console.log(res, 'activity_index')
						this.enter_history = res.data.result.enter_history
						if (this.enter_history == null) this.enter_history = 0
						if (this.enter_history == 1) this.factory_register_list()
					}
				})
			},
			
			//申请加入
			tijiao() {
				let data = this.addressdata;
				if (data.name == '') {
					this.showToast('商家名称不能为空', 'none', 2000)
					return false;
				}
				if (data.phone == '') {
					this.showToast('商家联系方式不能为空', 'none', 2000)
					return false;
				} else {
					let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
					if (!myreg.test(data.phone)) {
						this.showToast('商家联系方式不合法', 'none', 2000)
						return;
					}
				}
				if (data.address == '') {
					this.showToast('商家地址不能为空', 'none', 2000)
					return;
				}
				if (data.boss_name == '') {
					this.showToast('老板姓名不能为空', 'none', 2000)
					return false;
				}
				if (data.boss_phone == '') {
					this.showToast('老板电话不能为空', 'none', 2000)
					return false;
				} else {
					let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
					if (!myreg.test(data.boss_phone)) {
						this.showToast('老板电话不合法', 'none', 2000)
						return false;
					}
				}
				var id = this.activity_id;
				this.$comm.request({
					url: 'api/factory_register',
					method: 'POST',
					data: {
						boss_name: data.boss_name,
						boss_tel: data.boss_phone,
						code_url: data.code_url,
						head_url: data.head_url,
						name: data.name,
						tel: data.phone,
						address: data.address,
						activity_id: id
					},
					//收到开发者服务成功返回的回调函数
					success: res => {
						var res = res.data;
						if (this.history == true) {
							uni.navigateTo({
								url: 'management?activity_id=' + id
							})
						} else if (res.code == 200) {
							this.msg = res.msg;
							this.show_form = false;
						} else {
							uni.showToast({
								title: res.msg
							});
						}
					}
				});
			},

			//刷新是否通过审核
			loadstatic(id) {
				this.$comm.request({
					// api链接
					url: 'api/factory_status?activity_id=' + this.activity_id,
					//有效值，必须大写
					method: 'GET',
					//收到开发者服务成功返回的回调函数
					success: res => {
						var res = res.data;
						console.log(res.code + res.msg);
						if (res.code == 200) {
							this.show_form = true;
						} else if (res.code == 201) {
							this.show_form = false;
							this.msg = res.msg;
						} else if (res.code == 202) {
							this.show_form = false;
							this.msg = res.msg + '！等待跳转...';
							uni.navigateTo({
								url: 'management?activity_id=' + this.activity_id
							});
							console.log(this.activity_id, this.factory_id);
						} else {
							this.show_form = false;
							this.msg = res.msg;
						}
					}
				});
			},

			//上传二维码
			erweima() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res => {
						console.log(res, 6666);
						this.$comm.ossUpFile(res.tempFiles[0], url => {
							console.log(url, 6666);
							this.addressdata.code_url = url;
						});
					}
				});
			},
			
			//base64转换成图片
			parseBlob(base64) {
				var arr = base64.split(',');
				var mime = arr[0].match(/:(.*?);/)[1];
				var bstr = atob(arr[1]);
				var n = bstr.length;
				var u8arr = new Uint8Array(n);
				for (var i = 0; i < n; i++) {
					u8arr[i] = bstr.charCodeAt(i);
				}
				var url = URL || webkitURL;
				return url.createObjectURL(new Blob([u8arr], {
					type: mime
				}));
			},

			// 上传头像
			touxiang() {
				uni.chooseImage({
					count: 1,
					success: res => {
						// uni.showLoading({
						// 	title: '图片压缩中...',
						// 	mask: true
						// })
						this.$refs.wCompress.start(res.tempFilePaths[0], {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.5, // 压缩质量，默认0.8
								type: 'jpg', // 图片类型，默认jpg
								base64: false, // 是否返回base64，默认false，非H5有效
							})
							.then(res => {
								// console.log(res, 'base64')
								this.single = res
								let photo = {path:this.parseBlob(res)}
								// console.log(photo)
			
								this.$comm.ossUpFile(photo, url => {
									console.log(url, '图片已上传');
									this.addressdata.head_url = url;
								});
								
								uni.hideLoading()
							})
							.catch(e => {
								console.log(e,'touxiang,.catch')
								uni.hideLoading()
							})
					}
				})
			},
			showToast(msg, icon, time) {
				uni.showToast({
					title: msg,
					icon: `${icon}`,
					duration: time
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	page {
		background-image: url(../../static/backimg.jpg);
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.factory-box {
		background-color: #fff; font-size: 30rpx; width: 650rpx; padding: 30rpx; border-radius: 10rpx;
		
		.newfactory {
			text-align: center; background-color: #007AFF; line-height: 80rpx; color: #fff; border-radius: 10rpx;
		}
		
		.factory-title {
			text-align: center; font-size: 36rpx;
		}
		
		.factory-text {
			color: #f00; font-size: 24rpx; line-height: 50rpx;
		}
		
		.scroll-box {
			max-height: 900rpx; background-color: #fff; width: 100%;
			
			.factory-list {
				display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx;
				
				.factory-data {
					display: flex; align-items: center;
					
					.factory-img {
						width: 100rpx; height: 100rpx; border-radius: 10rpx; margin-right: 10rpx;
					}
					
					.factory-name{
						overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; max-width: 390rpx; 
					}
				}
				
				.factory-icon {
					width: 50rpx; height: 50rpx; transform:rotate(180deg);
				}
			}
			
			.divide {
				background-color: #eee; width: 100%; height: 2rpx; margin: 20rpx 0;
			}
			
			.factory-nomore {
				font-size: 26rpx; color: #999; text-align: center; line-height: 70rpx;
			}
		}
	}

	.content {
		position: relative;
		width: 650rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 50rpx 0 50rpx 0;
		margin-bottom: 70rpx;
		
		.sign-info {
			font-size: 28rpx; background-color: #0081FF; color: #fff; border-radius: 100rpx; line-height: 50rpx; padding: 0 20rpx; position: absolute; right: 4rpx; top: 4rpx;
		}
	}

	.signtitle {
		display: flex;
		padding: 0 50rpx 0 50rpx;
		flex-direction: column;
		align-items: center;
		text-align: center;
		font-weight: bold;

		text {
			margin-top: 30rpx;
			font-size: 25rpx;
			font-weight: normal;
		}
	}

	.signtext {
		padding: 0 50rpx 0 50rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		text {
			width: 140rpx;
		}

		input {
			width: 80%;
			padding: 10rpx;
			font-size: 30rpx;
			border-radius: 15rpx;
			height: 60rpx;
		}
	}

	.signimg {
		padding: 0 50rpx 0 50rpx;
		display: flex;
		align-items: flex-end;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;

		text {
			width: 30%;
			margin-right: 20rpx;
		}

		image {
			width: 150rpx;
			height: 150rpx;
		}

		.upimg {
			padding: 48rpx;
			border: solid 5rpx #EDEDED;
			border-radius: 5rpx;
		}
	}

	.signdivide {
		width: 100%;
		height: 1rpx;
		background-color: #d9d9d9;
	}

	.upbutton {
		background-color: #475dfc;
		color: #fff;
		border-radius: 50rpx;
		width: 80%;
		margin-top: 60rpx;
	}

	.velse {
		width: 700rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.else {
		text-align: center;
		font-size: 35rpx;
		margin-top: 120rpx;
	}
</style>
